import type {ComponentConfig, ComponentProp} from "@/lib/types"

export function generateBasicComponent(config: ComponentConfig): string {
    const {name, description, props, features} = config

    // 生成props接口
    const propsInterface = generatePropsInterface(props)

    // 生成默认值
    const defaultProps = generateDefaultProps(props)

    // 检查是否启用了特定功能
    const hasEvents = features.some((f) => f.id === "events" && f.enabled)
    const hasState = features.some((f) => f.id === "state" && f.enabled)
    const hasLifecycle = features.some((f) => f.id === "lifecycle" && f.enabled)

    return `<script setup lang="ts">
import { ref${hasLifecycle ? ", onMounted, onUnmounted" : ""} } from 'vue';

/**
 * ${description || `${name} 组件`}
 */
${propsInterface}

const props = withDefaults(defineProps<Props>(), {
${defaultProps}
});

${
        hasEvents
            ? `const emit = defineEmits<{
  (e: 'update:count', value: number): void;
  (e: 'click', event: MouseEvent): void;
}>();`
            : ""
    }

${
        hasState
            ? `const count = ref(0);

const increment = () => {
  count.value++;
  ${hasEvents ? "emit('update:count', count.value);" : ""}
};`
            : ""
    }

${
        hasLifecycle
            ? `onMounted(() => {
  console.log('${name} 组件已挂载');
});

onUnmounted(() => {
  console.log('${name} 组件已卸载');
});`
            : ""
    }
</script>

<template>
  <div class="p-4 rounded-lg shadow-md" :class="{
    'bg-primary/10 text-primary-foreground': props.variant === 'primary',
    'bg-green-50 text-green-700': props.variant === 'secondary',
    'bg-red-50 text-red-700': props.variant === 'danger'
  }">
    <h3 class="text-lg font-medium mb-2">{{ props.title }}</h3>
    ${
        hasState
            ? `<p class="mb-4">当前计数: {{ count }}</p>
    <button 
      @click="increment"
      class="px-4 py-2 rounded-md transition-colors"
      :class="{
        'bg-primary hover:bg-primary/90 text-primary-foreground': props.variant === 'primary',
        'bg-green-500 hover:bg-green-600 text-white': props.variant === 'secondary',
        'bg-red-500 hover:bg-red-600 text-white': props.variant === 'danger'
      }"
    >
      增加计数
    </button>`
            : `<slot></slot>`
    }
  </div>
</template>`
}

function generatePropsInterface(props: ComponentProp[]): string {
    if (props.length === 0) {
        return `interface Props {
  title?: string;
  variant?: 'primary' | 'secondary' | 'danger';
}`
    }

    return `interface Props {
${props
        .map((prop) => {
            const required = prop.required ? "" : "?"
            return `  ${prop.name}${required}: ${prop.type};`
        })
        .join("\n")}
}`
}

function generateDefaultProps(props: ComponentProp[]): string {
    if (props.length === 0) {
        return `  title: '组件标题',
  variant: 'primary'`
    }

    return props
        .filter((prop) => !prop.required && prop.defaultValue !== undefined)
        .map((prop) => `  ${prop.name}: ${formatDefaultValue(prop)}`)
        .join(",\n")
}

function formatDefaultValue(prop: ComponentProp): string {
    if (prop.type === "string") {
        return `'${prop.defaultValue}'`
    }

    if (prop.type === "number") {
        return prop.defaultValue || "0"
    }

    if (prop.type === "boolean") {
        return prop.defaultValue === "true" ? "true" : "false"
    }

    return prop.defaultValue || "undefined"
}
